<template>
  <!-- gfdgdfgdfgf -->
  <div class="register">
    <div class="title">注册</div>
    <div class="block">
      <input type="text" v-model="phone" placeholder="输入手机号" />
    </div>
    <div class="block">
      <input type="password" v-model="pass" placeholder="输入密码" />
    </div>
    <div class="block">
      <input type="password" v-model="checkpass" placeholder="输入确认密码" />
    </div>
    <div class="block">
      <input type="button" value="注册" @click="register" />
    </div>
    <div class="block">
      <input type="button" value="去登录" @click="gologin" />
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import "../mock/orderMock";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

var route = useRoute();
var router = useRouter();

let phone = ref("");
let pass = ref("");
let checkpass = ref("");
let register = () => {
  if (phone.value == false) {
    alert("请输入手机号");
  } else if (/^1[3-9]\d{9}$/.test(phone.value) == false) {
    alert("手机格式不正确");
  } else if (pass.value == false) {
    alert("请输入密码");
  } else if (checkpass.value == false) {
    alert("请确认密码");
  } else if (pass.value != checkpass.value) {
    alert("密码不一致");
  } else {
    axios
      .post("/api/user/register", { phone: phone.value, pass: pass.value })
      .then((res) => {
        console.log(res.data);
        if (res.data.code) {
          alert('注册成功')
          router.push('/login');
        } else {
          alert("账号已经存在");
        }
      });
  }
};
let gologin = () => {
  router.push("/login");
};
// var formData = ref({
//   phone: "",
//   pass: "",
//   checkpass: "",
// });

// var register = () => {
//   if (/^1[3-9]\d{9}$/.test(formData.value.phone) == false) {
//     alert("请输入合法的手机号");
//   } else if (!formData.value.pass || !formData.value.checkpass) {
//     alert("请输入密码/确认密码");
//   } else if (formData.value.pass !== formData.value.checkpass) {
//     alert("密码和确认密码不一致");
//   } else {
//     //验证通过
//     //深拷贝formData
//     var newFormData = JSON.parse(JSON.stringify(formData.value));
//     //删除对象的checkpass属性
//     delete newFormData.checkpass;
//     //发起注册请求
//     axios.post("/api/user/register", { newFormData }).then((res) => {
//       if (res.data.code == 200) {
//         //注册成功
//         alert("注册成功!");
//         //跳转到登录页
//         router.push("/login");
//       } else {
//         alert(res.data.msg);
//         router.push("/login");
//       }
//     });
//   }
// };
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  /* background-image: url(../login-bac.webp); */
  background-image: url(../views/beii.gif);
  background-size: cover;
  height: 100%;
}
.register {
  margin: 50px 200px;
}
.register .title {
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  margin-top: 150px;
}
.register .block {
  margin: 20px 0;
  /* margin:0 auto; */
}
.register .block input {
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 40%;
  margin-left: 350px;
}
</style>